import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { ArticleColumn,currentUser,getArticle } from './service';
import { useHistory } from 'umi';
import { Avatar } from 'antd';
import ArticleCount from './count';



interface Props {}

const column: FC<Props> = () => {
  //获取
  const [column, setcolumn] = useState([]);
  const [aritcle, setAritcle] = useState([]);
  const [userInfo, setUserInfo] = useState({});
  // setAritcle([
  // ])
  //专栏用户
  const getUserInfo = () => {
    currentUser({ user_id: localStorage.getItem('user_id') }).then(res => {
      setUserInfo(res.data);
      console.log('wowoo',res.data,userInfo)
    });
  };
  //获取文章
  const getAritcleList =  (value: any) => {
    getArticle({...value}).then(res => {
      setAritcle(res.data);
      console.log('我是获取文章呢',res.data)
    });
  };

  //获取专栏
  const getcolumn = () => {
    ArticleColumn({ user_id: localStorage.getItem('user_id') }).then(res => {
      setcolumn(res.data);
      console.log('zzz',res.data)
      getAritcleList({column:res.data[0].column,user_id:res.data[0].user_id,check:1,publish:1});

    });
  };

  //跳转

  const history = useHistory();
  const goToDetail = (id: number, user_id: string) => {
    history.push(`/client/detail/${id}`, { id, user_id });
  };
  // const getColumn = () => {
  // };
  // const history = useHistory();//声明
  // const standardType = history.location.state.index;//可获取到上面传递的值。
  
  // setcolumn(standardType)
  // console.log('我是号',standardType)
  //跳转
  useEffect(() => {
    getcolumn();
    getUserInfo();
  }, []);
  return (
    <div className={style.container}>
      {/* header */}
          <div className={style.cardtitle}>
            {column.map((item, index) => (
              <div>
                <div className={style.columnName}>
                  {column[0].column}
                </div>
                <div className={style.columnDetail}>
                  详情：{column[0].column_detail}
                </div>
              </div>
             ))}

            <div className={style.columnImg}>
              <Avatar src={userInfo.user_img} className={style.large} />
              <div className={style.columnWorker}>{userInfo.username}</div>
              <div className={style.columnWorker}>用户ID：{userInfo.user_id}</div>
            </div>
            <div className={style.columntime}>
              <div className={style.columnWorker}>创建于：{userInfo.createdAt}</div>
            </div>
             {/* content */}
            <div className={style.box}>
            {aritcle.map((item, index) => (

                <div
                className={style.card} 
                onClick={() => {
                  goToDetail(item.id, item.user_id);
                }}
                >
                  
                <div className={style.middle}>
                  <div className={style.title}> {item.title}</div>
                  <div>{item.desc.slice(0, 40)}</div>
                </div>
                <div className={style.bottom}>
                  <ArticleCount id={item.id} />
                </div>
                </div>
             ))}
               </div>
        </div>
    </div>
  );
};

export default column;
